<template>
	<view>
		<view class="status_bar"></view>
		<view class="header_created">
			<uni-nav-bar left-icon="back" :border="false" backgroundColor="transparent" :title="title" @clickLeft="backs">
			</uni-nav-bar>
			<view class="commission_details">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥28394.82</text>
						<text class="Hint">今日获得</text>
					</uni-grid-item>
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥58883.21</text>
						<text class="Hint">当月累计</text>
					</uni-grid-item>
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥58883.21</text>
						<text class="Hint">迄今累计</text>
					</uni-grid-item>
				</uni-grid>
				<view class="arrow_details">
					<text class="text_details" v-show="enterprise">累计营收：5228883.21元</text>
				</view>
			</view>
		</view>
		<view class="search_criteria">
			<text v-for="(item,index) in search_criteria" :class="['selectno',item.selects==true ? 'selectActive':'']" @click="searchcriteria(index)">{{item.name}}</text>
		</view>
		<view class="money_list">
			<text class="money_title">章程想的下级 购买商品返佣</text>
			<text class="money_num">+98.12</text>
			<view class="money_time">
				<text>2021.03.31 13:38</text>
				<text v-show="enterprise" class="money_remarks">这不是我的冰淇淋｜下级返佣</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				search_criteria: [
					{
						"name":'全部',
						"selects":true
					},
					{
						"name":'今天',
						"selects":false
					},
					{
						"name":'昨天',
						"selects":false
					},
					{
						"name":'过去7天',
						"selects":false
					},
					{
						"name":'过去30天',
						"selects":false
					},
				],
				pages:0,
				enterprise:false,
				title:''
			}
		},
		onLoad(parameter) {
			this.pages = parameter.pages
			if(this.pages == 1){
				this.enterprise=false
				this.title='返佣明细'
			}else{
				this.enterprise=true
				this.title='企业资金明细'
			}
		},
		methods: {
			// 返回上一页
			backs() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点击切换全部等列表
			searchcriteria(i){
				this.search_criteria.forEach((el,index)=>{
					if(index == i){
						el.selects=true
					}else{
						el.selects=false
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
	}
	
	.status_bar {
		height: var(--status-bar-height);
		background: rgba(252, 218, 34, 1);
	}
	
	.header_created {
		width: 100%;
		height: 304rpx;
		background-image: url(../../../static/me/bj.png);
		background-size: 100% 304rpx;
	}
	.commission_details {
		width: 699rpx;
		height: 217rpx;
		background-image: url(../../../static/me/bj_commission.png);
		background-size: cover;
		margin: auto;
		margin-top: 28rpx;
	}
	
	.commission {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 32rpx;
		margin-top: 28rpx;
		margin-bottom: 5rpx;
	}
	
	.Hint {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 32rpx;
	}
	.search_criteria{
		width: 699rpx;
		margin-top: 72rpx;
		margin-left: 25rpx;
	}
	.search_criteria text{
		padding: 9rpx 25rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		border: 1px solid #EEEEEE;
		border-radius: 47rpx;
		opacity: 1;
		margin-right: 18rpx;
	}
	.selectno{
		background: #FCFCFC;
	}
	.selectActive{
		background: #FFDC1D;
	}
	.money_list{
		width: 699rpx;
		height: 152rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
		margin: auto;
		margin-top: 21rpx;
	}
	.money_title{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		padding: 25rpx 0 0 25rpx;
		display: inline-block;
	}
	.money_num{
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		float: right;
		padding: 25rpx 25rpx 0 0;
	}
	.money_time{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		opacity: 0.35;
		display: block;
		padding: 28rpx 0 0 25rpx;
	}
	.money_remarks{
		float: right;
		padding: 0 25rpx 0 0;
	}
	.arrow_details {
		margin-top: 54rpx;
		height: 36rpx;
		line-height: 36rpx;
	}
	
	.text_details {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.65;
		margin-left: 32rpx;
		display: block;
		float: left;
	}
</style>
